<template>
  <!--     接入系統管理   -->
    <div class="preset-log">
        <div class="container-box">
          <!-- 主体部分 -->
          <div class="container-wk hkflex-cloumn">
              <!-- 搜索框 -->
              <div class="container-search">
                <el-form
                  ref="formRef"
                  :inline="true"
                  :model="formInline"
                  class="demo-form-inline"
                  style="position: relative"
                >
                  <div class="container-search-row">
                    <!-- 上边 -->
                    <div class="search-col-flex">
                      <el-form-item label="关键字">
                        <el-input
                          v-model="formInline.key"
                          placeholder="单位名称/会话标识"
                          clearable
                          style="width: 190px"
                        />
                      </el-form-item>
                      <el-form-item label="单位类别">
                        <el-select
                          v-model="formInline.orgType"
                          placeholder="请选择单位类别"
                          style="width: 190px"
                        >
                          <el-option
                            v-for="item in orgTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="注册类型">
                        <el-select
                          v-model="formInline.online"
                          placeholder="请选择注册类型"
                          style="width: 190px"
                        >
                          <el-option
                            v-for="item in onlineList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item style="margin-top: 36px">
                        <el-button
                          type="primary"
                          @click="handleSeach"
                          icon="el-icon-search"
                          >查询</el-button
                        >
                      </el-form-item>
                      <el-form-item style="margin-top: 36px">
                        <el-button
                          @click="handleReset('formRef')"
                          icon="el-icon-refresh"
                          >重置</el-button
                        >
                      </el-form-item>
                    </div>
                    <!-- 下边 -->
                  </div>
                </el-form>
              </div>
              <!-- 按钮组 -->
              <div class="tabs">
                <span
                  v-for="(item, index) in tabsObj"
                  :key="index"
                  :class="{ tab_active: index == activeIndex }"
                  @click="handleChangeTab(item.statusValue, index)"
                  style="padding-left: 20px; padding-right: 20px"
                  ><i :class="item.icon"></i> {{ item.statusName }}</span
                >
              </div>
              <!-- 表格 -->
              <hk-table
                :table-data="tableData"
                :table-columns="tableList"
                :selection="true"
                :total="total"
                :layout="'prev, pager, next,sizes'"
                :query-params="queryParams"
                @changePage="getList"
              >
          
              <template #orgType="scope">
                {{changeType(scope.row,'orgType') }}
              </template>
                <!-- 状态 -->
                <template #status="scope">
                  <div v-if="scope.row.status==0">
                      <el-form-item label="状态">
                        <el-select
                          v-model="formInline.orgType"
                          placeholder="请选择状态"
                          style="width: 190px"
                        >
                          <el-option
                            v-for="item in selectStatusLust"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </div>
                    <div
                      style="display: inline-block"
                      v-else-if="scope.row!=0"
                    >
                      <img
                        :src="require(`@/assets/images/${scope.row.status==0?'zhuangtai1':'zhuangtai2'}.png`)"
                        alt="example"
                        style="
                          vertical-align: middle;
                          width: 16px;
                          height: 16px;
                          margin-right: 5px;
                        "
                      />
                      <span style="font-size: 14px">{{
                       changeType(scope.row,'status')
                      }}</span>
                    </div>

                   
                </template>
                <!-- 注册类型 -->
                <template #online="scope">
                  {{ changeType(scope.row,'online') }}
                </template>
                <!-- 操作权限 -->
                <template #operate="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleDetails(scope.row)"
                    >详情
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleDistribute(scope.row)"
                    v-if="scope.row.status ==3"
                    >注销
                  </el-button>
                  <el-button
                  v-if="scope.row.status==0"
                    size="mini"
                    type="text"
                    @click="handleExamine(scope.row)"
                    >认证审核
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleUpdate(scope.row)"
                    v-if="scope.row.status ==3"
                    >下载
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleUpdate(scope.row)"
                    v-if="scope.row.status ==3"
                    >删除
                  </el-button>
                </template>
              </hk-table>
            </div>
          </div>
      <!-- <detail-dialog ref="detailDialogRef" :typeLists="{'orgTypeList':orgTypeList,'statusList':statusList,'onlineList':onlineList}"></detail-dialog> -->
      <examine-dialog ref="examineDialogRef" :typeLists="{'orgTypeList':orgTypeList,'statusList':statusList,'onlineList':onlineList}" @submit="handleSeach"></examine-dialog>

    </div>
 
</template>

<script>
import HkTable from "@/components/HKTable";
// import DetailDialog from "./component/DetailDialog.vue"
import ExamineDialog from "./component/ExamineDialog.vue"
import {getLists} from '@/api/accessProduct/accessSystem.js'
export default {
  components: {
    HkTable,
    DetailDialog,
    ExamineDialog
  },
  data() {
    return {
      layout: "prev, pager, next,sizes",
      tabsObj: [
        { statusName: "未处置", count: "86" },
        { statusName: "处置中", count: "23" },
        { statusName: "已处置", count: "56" },
      ],
      activeIndex: 0,
      formInline: {
        key: "",
        orgType:"",
        online:''
      },
      powerOptions: [],
      showHighSearch: false,
      // 树形组件
      treeData: [
        {
          name: "类型",
          // 控制图标
          showchild: true,
          children: [
            { name: "风险治理评估", count: 66 },
            { name: "保密态势", count: 64 },
            { name: "自定义类型", count: 162 },
          ],
        },
      ],
      defaultEventLevel: {},
      defaultProps: {
        children: "children",
        label: "label",
      },
      loading: false,
      tableList: [
        { label: "单位名称", param: "orgName" },
        { label: "会话标识", param: "clientId" },
        // { label: "描述", param: "describe" ,width:"370px"},
        { label: "单位类别", param: "orgType",type:'slot' },
        { label: "注册地址", param: "rule" },
        { label: "注册类型", param: "online",type:'slot' },
        { label: "状态", param: "status", type: "slot" },
        { label: "操作", param: "operate", type: "slot", width: "150px" },
      ],
      tableData:[],
      // 按钮数组
      listArr: [
        "督办",
        "核查取证",
        "生成案件",
        "协查申请",
        "情报维护",
        "处置情况研判",
      ],
      tabsObj: [
        { icon: "el-icon-plus", statusName: "离线注册" },
        { icon: "el-icon-delete", statusName: "离线注册信息导出" },
      ],
      total: 0,
      queryParams: {
        current: 1,
        size: 10,
      },
      tableLabelLists: [{ label: "", param: "list", type: "slot" }],
      detailData: {},
      checkList: [],
      currentGid: "",
      tableCheckList: [],
      searchQuery: {},
      title: "",
      formData: {},
      //  字典数据
      orgTypeList:[
        {label:"党政机关",value:'1'},
        {label:"事业单位",value:'2'},
        {label:"国有企业",value:'3'},
        {label:"其他单位",value:'4'},
      ],
      statusList:[
      {label:"申请提交",value:0}, 
      {label:"注册申请驳回",value:1},
      {label:"注册申请通过",value:2},
      {label:"注册完成",value:3},
      {label:"注销",value:-1},
      ],
      selectStatusLust:[
      {label:"注册申请驳回",value:1},
      {label:"注册申请通过",value:2},
      ],
      onlineList:[
      {label:"离线",value:0}, 
      {label:"在线",value:1},
      ]
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    //  单位类别转换
    changeType(row,type){
      let currentData=[];
      if(type=='orgType'){
        currentData=this.orgTypeList.filter(i=>{
     return row.orgType==i.value
      })
      }else if(type=='status'){
        currentData=this.statusList.filter(i=>{
          return row.status==i.value
      })
      }else if(type=='online'){
        currentData=this.onlineList.filter(i=>{
          return row.online==i.value
      })
      }
      if(currentData && currentData.length>0){
        return currentData[0].label
      }else{
        return "-"
      }
    },

    // 详情
    handleDetails(row) {
      this.$refs.examineDialogRef.show(row.id,'detail');
    },
    // 认证审核
    handleExamine(row){
      this.$refs.examineDialogRef.show(row.id,'examine');

    },

    /** 查询按钮  */
    handleSeach() {
      this.searchQuery = Object.assign({}, this.queryParams, this.formInline);
      this.getList(this.searchQuery);
    },
    /** 重置  */
    handleReset(formName) {
      this[formName] = {};
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
        this.formInline = {
          key: "",
        };
        this.handleSeach()
      });
    },
    /** 获取列表数据 */
    getList(query) {
      this.loading = true;
      getLists(Object.assign({},this.queryParams,query)).then((res) => {
        this.loading = false;
        this.tableData = res.list;
        this.total = res.total;
        console.log(res);
      });
    },
    /** tabs页切换*/
    handleTabsClick(tab, event) {
      this.queryParams = { current: 1, size: 10 };
      this.handleSeach();
    },
    /** 详情 */
    handleDetail(row) {
    },
    /** 切换处置tabs */
    handleChangeTab(value, index) {
      this.activeIndex = index;
      if (index === 0) {
        this.$refs.addDialogRef.show();
      }
    },
    /** 关闭按钮 */
    handleClose(row) {
      let ids = [];
      if (row.id) {
        ids = [row.id];
      } else {
        ids = this.tableCheckList.map((i) => {
          return i.id;
        });
      }
      this.$refs.handleDialogRef.show(ids);
    },
    
  
    changePage(data) {
      this.queryParams.current = data.current;
      this.queryParams.size = data.size;
      this.handleSeach();
    },
    /**  导出  **/
    handleExport() {
      this.handleSeach();
      this.download(
        window.baseUrl.dispose + "/incident/events/export",
        this.searchQuery,
        `离线注册信息导出_${new Date().getTime()}.xls`,
        "object"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .targetTable{
  flex:1;
}
::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0px !important;
}
::v-deep .el-input--medium .el-input__inner {
  color: #606266
}
::v-deep .el-radio-button:first-child .el-radio-button__inner {
  height: 32px;
}

::v-deep.demo-form-inline
  .container-search-row
  .data-picker-radius[data-v-15b2631f] {
  width: 275px;
  height: 32px;
  margin-top: 2px;
}
::v-deep .el-range-editor--medium .el-range__icon,
.el-range-editor--medium .el-range__close-icon {
  margin-top: -3px;
}
::v-deep .el-button--medium {
  height:36px;
  font-size: 14px;
  border-radius: 4px;
}
::v-deep .el-icon-date:before {
  margin-left: 239px;
}
// .el-form-item {
//   margin-bottom: -30px;
// }
// 默认样式
.listCss {
  cursor: pointer;
  // width: 100px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border: 1px solid #ccc;
  background: #ffffff;
  border: 1px solid rgba(229, 229, 229, 1);
  border-radius: 4px;
  margin-right: 10px;
  padding-left: 25px;
  padding-right: 25px;
  font-size: 14px;
  color: #000000;
}
.listCss:active,
.activeCss {
  background: #4b6eef;
  color: #ffffff;
}
.el-form-item-radius {
  ::v-deep .el-form-item__content {
    display: flex !important;
    align-items: flex-start !important;
  }
}

.demo-form-inline {
  flex-wrap: wrap;

  .container-search-row {
    display: flex;
    justify-content: space-between;
    .search-col-flex {
      display: flex;
    }
    .search-form-item {
      width: 15%;
      margin-right: 10px;
    }

    &.high-search-row {
      padding: 10px;
      background: #f3f5fc;
      border-top: 1px solid #4b6eef;
      position: relative;

      &::before {
        display: inline-block;
        content: "";
        position: absolute;
        width: 10px;
        border-bottom: 6px solid #4b6eef;
        border-top: 6px solid transparent;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        top: -13px;
        left: 5%;
      }
    }

    width: 100%;

    .el-col {
      display: flex;
      align-items: flex-end;
      margin-bottom: 10px;
    }
    .data-picker-radius {
      border-left: 0 !important;
      border-radius: 0 4px 4px 0 !important;
    }
  }
}
.preset-log {
  background: #fff;
  padding: 20px;
  height: 100%;
  .container-wk {
    flex:1;
    overflow:hidden;
    .left-container {
      overflow: hidden;
      flex-shrink: 0;
    }

    .right-container {
      .targetTable {
        flex: 1;
      }
    }
  }

  .el-form {
    display: flex;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }

  .container-box {
    height: 100%;
    .container-search {
      padding-bottom:20px;
      background: #fff;
    }
  }

  .left-container {
    height: 100%;
    border-top: 0px !important;
  }

  // 跳转的部分
  .m-container {
    width: 100%;
    height: 100%;
    background: #e5ecf6;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 14px;
    // 头部
    .m-header {
      background: #fff;
      box-shadow: 0 0 40px 0 rgb(0 0 0 / 8%);
      border-radius: 4px;
      margin-bottom: 10px;
    }

    // 线
    .header-line {
      width: 100%;
      height: 38px;
      line-height: 38px;
      padding: 0 8px;
      border-bottom: 1px solid #e8e8e8;
      cursor: pointer;
    }

    .filter-source {
      padding: 10px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .drawmain {
      padding: 0 16px 10px 16px;

      .addSearchParam-container {
        max-height: 265px;
        height: 100%;
        overflow: auto;

        .one-level-search-content {
          position: relative;
          padding-left: 40px;
          padding-bottom: 4px;

          .change-one-level-btn {
            position: absolute;
            left: 0;
            top: calc(50% - 6px);
            z-index: 3;
            padding: 0;
            width: 24px;
            height: 24px;
            color: #2979ff;
            border: none;
            background: #edf5ff;
            border-radius: 2px;
          }

          .addSearchParam {
            width: 100%;
            margin-bottom: 8px;
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 20%;
            background-color: #f8f9fc;
            border: 1px solid #f0f0f0;

            &::after {
              content: "";
              position: absolute;
              top: -11px;
              left: -29px;
              bottom: -11px;
              border-left: 1px solid #cfe4fe;
            }

            .content {
              flex: 1;
              overflow-y: auto;
              display: flex;
              padding: 16px;
              justify-content: space-between;
              align-items: end;

              & > div {
                width: 60%;
                height: 100%;
                overflow-y: auto;
              }

              .searchContent {
                display: table;
                max-height: 93%;
                position: relative;
                padding-left: 29px;
              }

              .add-btn {
                padding-left: 10px;
              }
            }
          }
        }
      }
    }
  }

  .params-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -15px;
      bottom: -15px;
      border-left: 1px solid #cfe4fe;
    }

    .params-input {
      margin-right: 8px;
    }
  }

  .add-search-bottom {
    display: flex;
    justify-content: space-between;
    padding-left: 40px;
  }

  .l-container {
    background: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .total {
      padding: 8px;
      font-size: 14px;
    }
  }
}

::v-deep .el-tabs__nav-wrap::after {
  background: transparent !important;
}

.tabs {
  span {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
    // padding: 8px 15px;
    border-bottom: 2px solid transparent;
    // width: 124px;
    height: 32px;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 4px;
    &.tab_active {
      // display: inline-block;
      background: #4b6eef;
      border-radius: 4px;
      color: #ffffff;
    }
  }
}

.tab-content {
  position: relative;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  .tab-header {
    position: absolute;
    top: 24px;
    font-size: 14px;
    right: 2%;
    z-index: 2;
    width: 94%;
    display: flex;
    align-items: center;

    .left-btn {
      flex: 1;
    }

    .right-btn {
      span {
        display: inline-block;
        padding: 10px 0;
        cursor: pointer;
        margin-left: 20px;
      }
    }
  }
}

.tablelist-title {
  // font-weight: 9000;
  font-size: 16px;
  color: #111111;
  font-weight: 500;
  margin: 10px 0;
}

::v-deep .el-table__body-wrapper {
  //height: calc(100% - 50px) !important;
}

::v-deep .el-button--danger.is-plain:focus {
  background: transparent !important;
  color: #ff4949 !important;
}

::v-deep .description {
  width: 90%;
  padding-top: 8px;
  margin-left: 20px;
}

::v-deep .text-ellipsis {
  width: calc(100% - 140px);
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
